<template>
    <el-menu-item index="4" @click="handleVideo" :disabled="isShowVideo"><span class="iconfont icon-lujing-3">&nbsp;</span>视频监控</el-menu-item>
    <el-menu-item index="9" @click="handleInfo" :disabled="isShowInfo"><span class="iconfont icon-lukuangxinxi">&nbsp;</span>路况信息</el-menu-item>
    <el-menu-item index="5" @click="handleAddEvent"><span class="iconfont icon-chuangjianshijian-tianjia">&nbsp;</span>事件添加</el-menu-item>
    <el-menu-item index="6" @click="handleUpdateEvent"><span class="iconfont icon-shijiangengxin">&nbsp;</span>事件更新</el-menu-item>
    <el-sub-menu index="7">
        <template #title><span class="iconfont icon-shijianchaxun">&nbsp;</span>事件查询</template>
        <el-menu-item index="7-1" @click="triggerChildMethod" :disabled="queryflag">选区查询</el-menu-item>
        <el-menu-item index="7-2" @click="clearQuery">取消选区</el-menu-item>
        <el-menu-item index="7-3" @click="AllChartTrigger">事件图表</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="10">
        <template #title><span class="iconfont icon-gonggao">&nbsp;</span>公告</template>
        <el-menu-item index="10-1" @click="handleAnnocementAdd">发布公告</el-menu-item>
        <el-menu-item index="10-2" @click="handleAnnocementAdmin">管理公告</el-menu-item>
    </el-sub-menu>
    <teleport to="#mapview">
        <!-- 视频监控组件 -->
        <QueryVideo v-if="isShowVideo" />
        <RoadInformation v-if="isShowInfo" />
        <!-- 事件添加的弹窗 -->
        <AddEventOverlay :handleCancel="handleCancel" :form="form" :handleSubmit="handleSubmit"></AddEventOverlay>
        <!-- 事件更新的弹窗 -->
        <ChangeEvent :popupContent="popupContent" @closePopup="closePopup" @changeEvent="changeEvent"
            v-show="changeEventFlag" />
        <!-- 选区查询的弹窗 -->
        <keep-alive>
            <QueryCom v-if="queryflag" ref="queryComRef" />
        </keep-alive>
        <AllChart v-if="allChartFlag"/>
        <!-- 公告管理的弹窗 -->
        <AnnouncementAdmin></AnnouncementAdmin>
        <!-- 公告发布的弹窗 -->
        <AnnouncementAdd></AnnouncementAdd>
    </teleport>
</template>

<script setup>
import { ref, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
/**引入组件 */
import QueryVideo from '@/components/QueryVideo.vue'
import AddEventOverlay from './AddEventOverlay.vue'
import ChangeEvent from '@/components/ChangeEvent.vue'
import QueryCom from '@/components/Query/Query.vue'
import AllChart from '@/components/Query/AllChart.vue'
import RoadInformation from '@/components/RoadInformation.vue'
import AnnouncementAdmin from './AnnouncementAdmin.vue'
import AnnouncementAdd from './AnnouncementAdd.vue'
/* 引入公共状态管理对象 */
import { useCommonStore } from '@/stores/common'
import { storeToRefs } from 'pinia'

/**引入js */
import { claerMap } from '@/hook/MapClear.js'
import { useAddEventHook } from '../Hooks/useAddEventHook.js'
import { useChangeEventHook } from '../Hooks/useChangeEventHook.js'
import { useAnnouncementHook } from '../Hooks/useAnnouncementHook.js'



const { proxy } = getCurrentInstance()
/* 引入公共状态管理对象 */
const store = useCommonStore()
const { queryflag, InputFlag, isShowVideo, changeEventFlag, addEventFlag, isShowInfo,allChartFlag } = storeToRefs(store)

/**函数调用 */
const { handleCancel, handleAddEvent, handleSubmit, form } = useAddEventHook()
let { popupContent, closePopup, changeEvent } = useChangeEventHook()
/* 公告发布 */
const { handleAnnocementAdd, handleAnnocementAdmin, handleAnnouncementBoard } =
  useAnnouncementHook()

const props = defineProps({
    activeIndex: {
        type: String,
        default: ''
    }
})

/**视频监控 */
const handleVideo = () => {
    isShowVideo.value = true
    // 禁止重复点击
}
const handleInfo = () => {
    isShowInfo.value = true
}
/**事件更新函数 */
const handleUpdateEvent = () => {
    console.log('事件更新')
    changeEventFlag.value = true
}

/**选区查询 */
const queryComRef = ref('')
const triggerChildMethod = async () => {
    /* 禁止重复点击 */
    queryflag.value = true;
    /* 异步操作等待组件渲染完成 */
    await nextTick();
    if (queryComRef.value) {
        queryComRef.value.activeDraw();
    }
}
const AllChartTrigger = () => {
    allChartFlag.value = true;
}
/**取消选区 */
const clearQuery = async () => {
    await nextTick()
    if (queryComRef.value) {
        console.log('取消选区')
        queryComRef.value.cancelQuery();
        InputFlag.value = false;
    } else {
        let $map = proxy.$map
        claerMap($map)
        InputFlag.value = false;
    }
}

/**互斥监控 */
watch(() => props.activeIndex, (newVal, oldVal) => {
    if (newVal.length == 1 && newVal.split('-')[0] !== oldVal.split('-')[0]) {
        claerMap(proxy.$map)
    }
    if (newVal !== "6") {
        changeEventFlag.value = false
    }
    if (newVal !== "5") {
        addEventFlag.value = false
    }
    if (newVal !== "4") {
        isShowVideo.value = false
    }
})
</script>

<style scoped></style>